﻿
@{
    ViewBag.Title = "Editor";
    Layout = "~/Areas/Demo/Views/Shared/Demo_Layout.cshtml";
}
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Editor</h1>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <form method="post">
            @Html.TextArea("CKEditorText")
            <input type="submit" class="btn btn-primary" value="submit" />
        </form>
    </div>

    <div class="col-lg-6">
        <button class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#myModal">
            Modal Editor
        </button>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modal Editor</h4>
                    </div>
                    <div class="modal-body">
                        <form id="Modal_Form" method="post">
                            @Html.TextArea("Modal_CKEditorText")
                        </form>
</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" onclick="Modal_Alert()">Alert changes</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    </div>
</div>
<script src="~/bower_components/ckeditor/ckeditor.js"></script>
<script src="~/bower_components/ckfinder/ckfinder.js"></script>
<!--CKEditor和Bootstrap的Modal窗口兼容性调整-->
<script type="text/javascript">
    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        var $modalElement = this.$element;
        $(document).on('focusin.modal', function (e) {
            var $parent = $(e.target.parentNode);
            if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length
                // add whatever conditions you need here:
                &&
                !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
                $modalElement.focus()
            }
        })
    };
</script>
<script>
    $(function () {
        var id = $("#CKEditorText").attr("id");
        var editor = CKEDITOR.replace(id);
        CKFinder.setupCKEditor(editor, '/bower_components/ckfinder/');  //结合上传控件
        var id2 = $("#Modal_CKEditorText").attr("id");
        var editor2 = CKEDITOR.replace(id2);
        CKFinder.setupCKEditor(editor2, '/bower_components/ckfinder/');  //结合上传控件
    });
    function Modal_Alert() {
        CKEDITOR.instances.Modal_CKEditorText.updateElement();//同步输入值,用于ajax提交
        var text = $("#Modal_CKEditorText").val();
        alert(text);
    }
</script>
